Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會延續 Re: 從零改用 .NET MAUI 技術來繼續過去用 Xamarin 技術開發的一個 App : TopStore 使用 .NET MAUI 技術所建立的 TopStore App ，更新 .NET MAUI 在 .NET 6 轉換到 .NET 7 時所需要調整的部分，並持續地的開發 TopStore App 其他需要的功能。

本篇是 Re: 從零續用 .NET MAUI 技術開發過去的一個 App : TopStore 系列 系列文的 EP11。

就如同前一回 EP 所說，要進一步來設計 OrderDetail 及其畫面呈現的相關使用。

首先，在 Models 當中設計 OrderDetail 這個類別：

using SQLite;

namespace TopStoreApp.Models;

public class OrderDetail
{
    [PrimaryKey, AutoIncrement]
    public int Id { get; set; }
    [NotNull]
    public int OrderId { get; set; }
    [NotNull]
    public int ProductId { get; set; }
    [NotNull]
    public decimal Quantity { get; set; }
    [NotNull]
    public decimal Price { get; set; }
    public string Note { get; set; }
}

其完成結果如下圖：

而為了作 OrderDetailsPage 呈現頁面項目，再多設計一個類別 OrderDetailDisplay：

[INotifyPropertyChanged]
public partial class OrderDetailDisplay
{
    public string ProductName { get; set; }
    public decimal Quantity { get; set; }
    public int OrderDetailId { get; set; }
    public string Note { get; set; }
}

注意到上面的 namespace 會多下列的引用：

using CommunityToolkit.Mvvm.ComponentModel;

其完成結果如下圖：

接著再到 ViewModels 當中增加一個 OrderDetailsPageViewModel 的類別，並針對其的程式碼設計如下：

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System.Collections.ObjectModel;
using TopStoreApp.Models;

namespace TopStoreApp.ViewModels;

[QueryProperty(nameof(OrderId), "orderId")]
[QueryProperty(nameof(OrderOwnerQueryString), "orderOwner")]
[QueryProperty(nameof(OrderDateQueryString), "orderDate")]
public partial class OrderDetailsPageViewModel : BasePageViewModel
{
    [ObservableProperty]
    private ObservableCollection<Models.OrderDetailDisplay> _orderDetailDisplays;

    [ObservableProperty]
    private string _orderOwner;

    [ObservableProperty]
    private string _orderDate;

    public int OrderId
    {
        set
        {
           //OrderDetailDisplays = App.DataService.GetOrderDetailDisplays(value);
        }
    }

    public string OrderOwnerQueryString
    {
        set
        {
            OrderOwner = value;
        }
    }

    public string OrderDateQueryString
    {
        set
        {
            OrderDate = value;
        }
    }

    [RelayCommand]
    private async void Select(OrderDetailDisplay orderDetailDisplay)
    {
        await Shell.Current.DisplayAlert("Order Detail Selected",
                                        $"Order Detail: {orderDetailDisplay.ProductName}\r\n" +
                                        $"OrderDetail Id: {orderDetailDisplay.OrderDetailId}", "OK");
    }
}

其完成結果如下圖：

這邊會注意到，在此 OrderDetailsPageViewModel 當中設計了三個 QueryProperty 的參數準備接收從 OrderOwnersPage 傳入的資訊值。

而在 OrderId 的 Set 部分，由於還沒有在 DataService 當中設計 GetOrderDetailDisplays 的方法，所以先將此行程式註解。

所以接下來準備回到 OrderOwnersPageViewModel 找到其 Select 方法，把原本的 DisplayAlert 程式給註解後，改為以下程式：

await Shell.Current.GoToAsync($"//Orders/OrderOwners/OrderDetails?" +
                                    $"orderId={order.OrderId}&" +
                                    $"orderOwner={order.Owner}&" +
                                    $"orderDate={OrderDate.Date.ToString("yyyy/MM/dd (ddd)")}");

完成結果如下圖：

會發現，此次在 GoToAsync 所帶的 URL 在 ? 後面有設計三個參數，其內容值就會傳到到下一個畫面 OrderDetailsPage 所要繫結到的 OrderDetailsPageViewModel 去接收。

而如果再細心點的捧友就會發現到轉跳的路由方式也比過去多一層了。不過，這部分就等之後完成OrderDetailsPage 頁面設計後，能做實際的畫面展示時再來做講解吧！

下一回再繼續囉~~~